/// SIDEBAR
/// More info: https://every-layout.dev/layouts/sidebar/
/// A layout that allows you to have a flexible main content area
/// and a "fixed" width sidebar that sits on the left or right.
/// If there is not enough viewport space to fit both the sidebar
/// width *and* the main content minimum width, they will stack
/// on top of each other

/// CUSTOM PROPERTIES AND CONFIGURATION
/// --gutter ($global-gutter): This defines the space
/// between the sidebar and main content.

/// --sidebar-target-width (20rem): How large the sidebar should be

/// --sidebar-content-min-width(50%): The minimum size of the main content area

/// EXCEPTIONS
/// .sidebar[data-direction='rtl']: flips the sidebar to be on the right
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, $global-gutter);
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/// A flipped version where the sidebar is on the right
.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}
